<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/qs@6.10.2/dist/qs.js"></script>
</head>
<body>
    <input type="file" id="fileInput" multiple>
    <script>
        async function fromDataUpload(){
            const data = new FormData();

            data.set('name','小红');
            data.set('age', 20);
            data.set('file1', fileInput.files[0]);
            data.set('file2', fileInput.files[1]);
            // [...fileInput.files].forEach(item => {
            //     data.append('bbb', item)   //追加内容到已存在的键中
            // })
             
            const res = await axios.post('/api/person/file',data,{
                //fetch不需要指定content-type，会自动匹配
                headers: { 'content-type': 'multipart/form-data' }
            })

            console.log(res);
  
        }

        fileInput.addEventListener('change',fromDataUpload);



        /*async function send() {
            const res = await axios.get('/api/person/find',{
                // 参数通过 params 指定，axios 会做 url encode，不需要自己做。
                params: {
                    name : 'xxx',
                    age : 20
                }
            });
            console.log(res);            
        }
        send();*/

        /*async function send() {
            const res = await axios.post('/api/person/post',{
                // 参数通过 params 指定，axios 会做 url encode，不需要自己做。
                params: {
                    name : '你好',
                    age : 20
                }
            },{
                //其实默认方式就是json
                headers: {'content-type': 'application/json'}
            });
            console.log(res);            
        }
        send(); */

   </script>
</body>